<template>
  <div>
     <head_view title="消息"></head_view> 
     <article>
          <ul>
              <router-link to="/messages/customer" tag="li" active-class="select">
                  <i></i>
                  <em>客户信息</em>
              </router-link>
               <router-link to="/messages/task" tag="li" active-class="select">
                  <i></i>
                  <em>任务提醒</em>
              </router-link>
               <router-link to="/messages/news" tag="li" active-class="select">
                  <i></i>
                  <em>公司新闻</em>
              </router-link>
               <router-link to="/messages/sales" tag="li" active-class="select">
                  <i></i>
                  <em>促销活动</em>
              </router-link>
          </ul>
          <div>
              <router-view></router-view>
          </div>
     </article>
    
  </div>
</template>

<script>
  import Head from '../../public/head.vue'
  export default {
    data () {
      return {

      }
    },
    components:{
      head_view:Head
    }
  }
</script>

<!--Add "scoped" attribute to limit CSS to this component only-->
<style scoped lang="less">
article{
  position: absolute;
  width:100%;
  top:1rem;
  bottom:0.8rem;
  overflow:hidden;
  ul{
      width:100%;
      height: 1.6rem;
      border-bottom: 0.01rem solid #c9c9c9;
      background-color: #fff;
      display: box;
      display: -webkit-box;
      display: flex;
      display: -webkit-flex;
      li{
         box-flex: 1;
         -webkit-box-flex: 1;
         flex: 1;
         -webkit-flex: 1; 
         margin-top: 0.2rem;
         &.select em{
            color:#88bd43;
         }
         i{
            display: block;
            width:0.75rem;
            height: 0.75rem;
            background:url(../../../common/images/meg.png) no-repeat; 
            background-size: 6rem 0.75rem;  
            margin:0 auto;
         }
         &:nth-child(1) i{
            background-position: -1.5rem 0;
         }
         &:nth-child(2) i{
            background-position: 0 0;
         }
         &:nth-child(3) i{
            background-position: -3rem 0;
         }
         &:nth-child(4) i{
            background-position: -4.5rem 0;
         }
         &:nth-child(1).select i{
            background-position: -2.25rem 0;
         }
         &:nth-child(2).select i{
            background-position: -0.75rem 0;
         }
         &:nth-child(3).select i{
            background-position: -3.75rem 0;
         }
         &:nth-child(4).select i{
            background-position: -5.25rem 0;
         }
         em{
            display: block;
            font-size: 0.22rem;
            color:#b9b8b8;
            text-align: center;
         }
      }
  }
  &>div{
      width:100%;
      position: absolute;
      top:1.6rem;
      bottom:0;
      overflow-x:hidden;
      overflow-y:auto;
  }
}
</style>





